<template>
    <div class=" header main">
        <span id="header">
            <span>
                <span>{{mname}}</span>
                <el-button type="primary" plain v-if="principal === null" @click="dd1()" style="height: 37px;width: 70px">登录</el-button>
                <el-button type="info" plain v-else @click="output()" style="height: 37px;width: 70px">注销</el-button>
            </span>
        </span>

        <div style="width: 80%">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                     active-text-color="red"
                     style="font-weight:bold">
                <el-menu-item index="3" @click="$router.push('/shouye')">首页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('/product')">商品展示</el-menu-item>
                <el-menu-item index="1" @click="$router.push('/activity')">专享活动</el-menu-item>
                <el-menu-item index="4" @click="$router.push('/shoppingCart')">购物车</el-menu-item>
                <el-menu-item index="5" @click="$router.push('/personalCenter')">个人中心</el-menu-item>
            </el-menu>
        </div>

        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tbody>
            <tr>
                <td class="topb">
                    <img src="../assets/img/1003.jpg" width="100%">
                </td>
            </tr>
            </tbody>
        </table>

        <hr/>
        <div class="block">
            <el-carousel :interval="4000" type="card" height="450px">
                <el-carousel-item v-for="(item, index) in list_img" :key="index">
                    <h3 class="medium">
                        <img :src="item.url" alt width="650px"/>
                    </h3>
                </el-carousel-item>
            </el-carousel>
<!--            {{activityList}}-->
<!--            <h2>已开始的活动</h2>-->
            <ul>
                <li v-for="(item,index) in activityList" @key="index" style="margin: 10px">
                    <div style="height:400px;border: 1px solid black;text-align: left">
                        <img :src="getUrl(item.picPath)" alt="" width="100%" height="200px" style="cursor: pointer" @click="activityProductSeckill(item.tid,index)">
                        <h2>
                            {{timeLists[index]}}
                            {{timeList[index]}}
                        </h2>
                        活动名称 ： {{item.labelName}} <br/>
                        活动描述： {{item.shortDesc}}<br/>
                        活动开始时间： {{item.startTime}}<br/>
                        活动结束时间： {{item.finishTime}}<br/>
                    </div>

                </li>
            </ul>
            <div class="time-down">
<!--                <div class="time"><i class="el-icon-time"></i> {{hr}} 时{{min}}分钟 {{sec}}秒 </div>-->
            </div>

        </div>
        <hr/>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "Activity",
        data () {
            return {
                list_img: [
                    {url: require('../assets/img/2001.jpg')},
                    {url: require('../assets/img/2003.jpg')},
                    {url: require('../assets/img/2002.jpg')},
                    {url: require('../assets/img/2004.jpg')},
                    {url: require('../assets/img/2005.jpg')},
                ],
                principal: sessionStorage.getItem("token"),
                mname:'已登录',
                list:null,
                activeIndex: '1',
                activityList:'',
                timeList:[],
                timeLists:[],
                flag : false,
            };
        },
        created() {

            if (this.principal === null){
                this.mname = "未登录"
            }
            this.getSeckillNowtime();
            this.getDjs();
            this.getStr();
            this.clearUserOrder();
        },

        methods: {

            getDjs() {
                setInterval(() => {
                        this.timeList = []; // 循环之前清空上一秒存入的数据，让数组始终保持最新一条的数据
                    for(var i = 0; i< this.activityList.length; i++){
                        // console.log(moment().format('X'));//获取当前时间的时间戳
                        // console.log(moment(this.endTime[i].time).format('X'));//获取指定时间的时间戳
                        // console.log(moment(this.endTime[i].time).format('X') - moment().format('X'));//获取时间戳的差值
                        let timeVal = this.moment(this.activityList[i].finishTime).format('X') - this.moment().format('X');
                        // 时间戳转换
                        var d = Math.floor(timeVal / (24 * 3600));
                        var h = Math.floor((timeVal - 24 * 3600 * d) / 3600);
                        var m = Math.floor((timeVal - 24 * 3600 * d - h * 3600) / 60);
                        var s = Math.floor((timeVal - 24 * 3600 * d - h * 3600 - m * 60));
                        // console.log(d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 打印出转换后的时间
                        //  当时分秒小于10的时候补0
                        var hh = h < 10 ? '0' + h : h;
                        var mm = m < 10 ? '0' + m : m;
                        var ss = s < 10 ? '0' + s : s;

                            this.timeList.push("活动结束时间 ："+d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 将三个倒计时日期添加到一个空的数组中


                    }
                    // console.log(this.timeList); // 打印结果
                },1000);
            },
            getStr() {
                setInterval(() => {
                    this.timeLists = []; // 循环之前清空上一秒存入的数据，让数组始终保持最新一条的数据
                    for(var i = 0; i< this.activityList.length; i++){
                        // console.log(moment().format('X'));//获取当前时间的时间戳
                        // console.log(moment(this.endTime[i].time).format('X'));//获取指定时间的时间戳
                        // console.log(moment(this.endTime[i].time).format('X') - moment().format('X'));//获取时间戳的差值
                        let timeVal = this.moment(this.activityList[i].startTime).format('X') - this.moment().format('X');
                        // 时间戳转换
                        let d = Math.floor(timeVal / (24 * 3600));
                        let h = Math.floor((timeVal - 24 * 3600 * d) / 3600);
                        let m = Math.floor((timeVal - 24 * 3600 * d - h * 3600) / 60);
                        let s = Math.floor((timeVal - 24 * 3600 * d - h * 3600 - m * 60));
                        // console.log(d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 打印出转换后的时间
                        //  当时分秒小于10的时候补0
                        let hh = h < 10 ? '0' + h : h;
                        let mm = m < 10 ? '0' + m : m;
                        let ss = s < 10 ? '0' + s : s;
                        // console.log(d);
                        if(d >= 0){
                            this.flag = true;
                            this.timeLists.push("距离活动开始时间还有 ："+d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 将三个倒计时日期添加到一个空的数组中
                        }else{
                            d = -d;
                            this.flag = false;
                            // this.timeLists.push("活动已经开始："+d + '天' + hh + '时' + mm + '分' + ss + '秒'); // 将三个倒计时日期添加到一个空的数组中

                        }
                    }
                    // console.log(this.timeList); // 打印结果
                },1000);
            },
            clearUserOrder(){
                setInterval(() => {
                    let username = sessionStorage.getItem("username");
                    this.$http.post("product/seckill/clearUserOrder",username).then((res)=>{
                        // console.log("10秒执行一次操作")
                    });
                },10000);

            },
            handleSelect (key, keyPath) {
                console.log(key, keyPath);
            },
            dd1(){
                this.$router.push('/login')
            },
            output(){
                this.$router.replace('shouye')
                sessionStorage.clear()
                localStorage.clear()
                this.$router.go(0)
            },
            // 获取日期格式
            getNowTime(){
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                if(month < 10){
                    month = "0"+month;
                }
                let day = date.getDate();
                if(day < 10){
                    day = "0"+day;
                }
                let hour = date.getHours();

                if(hour < 10){
                    hour = "0"+hour;
                }
                if(hour === 24){
                    day = day +1;
                    hour = "00";
                }
                let dateTime = year+month+day+hour;
                return dateTime;
            },
            // 获取当前时间的活动信息
            getSeckillNowtime(){
                // let nowTime = this.getNowTime();
                let nowTime = "activity";
                // console.log(nowTime)
                this.$http.post("product/seckill/getNowTimeActivity",{time:nowTime}).then((res)=>{
                    console.log("已经开始的活动")
                    console.log(nowTime);
                    console.log(res);
                    this.activityList = res;
                })
            },
            // 获取图片
            getUrl (picPath) {
                return `http://localhost:8092/product/activity/findProductPicByPath?name=`+picPath;
            },
            // 跳转到商品详情页面
            activityProductSeckill(tid,index){
                console.log(this.activityList[index].finishTime);
                let date = new Date(this.activityList[index].finishTime);
                if(date < new Date()){
                    alert("当前活动已经结束")
                }else{
                    this.$store.commit("setTid",tid);
                    this.$router.push("activityContent")
                    console.log(nowTime+"----"+tid);
                }
                console.log(date);

            }
        },
    }
</script>

<style scoped>
    ul{
        list-style: none;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    #header
    {
        position: absolute;
        top: 25px;
        bottom: auto;
        left: -5px;
        width: 100%;
        height: 38px;
        overflow: hidden;
    }
    /* Header's buttons. */
    #header > span
    {
        float: right;
        width: 200px;
    }
    #header > span > button
    {
        position: absolute;
    }
    #header > span > span
    {
        padding: 0px 8px 16px 0px;
        line-height: 40px;
    }
</style>
